<template>
  <div class="home">
    <div class="name">违规投诉</div>
    <div class="center">
      <el-button type="success" @click="dialogVisible = true"> 投诉 </el-button>
      <el-table :data="list">
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column label="投诉标题" align="center" prop="title" />
        <el-table-column label="创建时间" align="center" prop="creationTime">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.creationTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理状态" align="center" prop="materialModel">
         <template slot-scope="scope">
            <span
              :style=" scope.row.complaintType == 0 ? 'color: #f79a23;' : 'color: #666666;'"
              >{{ scope.row.complaintType == 0 ? "正在处理中" : "处理完成" }}</span
            >
          </template>
           </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="goToDetails(scope.row)"
              >查 看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="getList"
        >
        </el-pagination>
      </div>
      <div>
        <el-dialog
          :title="投诉"
          :visible.sync="dialogVisible"
          width="600px"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" :rules="rules" label-width="left">
            <el-form-item label="投诉标题" prop="title">
              <el-input v-model="form.oddNumber" placeholder="请输入投诉标题" />
            </el-form-item>
            <el-form-item label="投诉内容" prop="complaintText">
              <el-input
                type="textarea"
                v-model="form.complaintText"
                placeholder="请输入投诉内容"
              />
            </el-form-item>
            <el-form-item label="联系人" prop="contactPerson">
              <el-input
                v-model="form.contactPerson"
                placeholder="请输入投诉内容"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactNumber">
              <el-input
                v-model="form.contactNumber"
                placeholder="请输入投诉内容"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm(1)">保 存</el-button>
            <el-button type="primary" @click="submitForm(0)">提 交</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getComplaintList, setComplaint } from "@/api/procurement/complaint";
export default {
  data() {
    return {
      list: [],
      tatol: 0,
      pageSize: 10,
      currentPage: 1,
      dialogVisible: false,
      form: {},
      rules: {
        title: [{ required: true, message: "请输入投诉标题", trigger: "blur" }],
        complaintText: [
          { required: true, message: "请输入投诉内容", trigger: "blur" },
        ],
        contactPerson: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactNumber: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
      },
    };
  },
  created (){
    this.getList()
  },
  methods:{
    // 获取违规列表
    getList(){
        getComplaintList({
            pageSize: this.pageSize,
            pageIndex: this.currentPage
            }).then((res) =>{
                this.total = res.total,
                this.list = res.data
        })
    },
    // 跳转详情页
    goToDetails(row){
        this.$router.push({
            name:"complaintDetails",
            query:{
                complaintId:row.complaintId
            }
        })
    },
     cancel() {
      this.dialogVisible = false;
      this.form = {};
    },
    // 发起投诉
    submitForm() {
      setComplaint(this.form).then((res) => {
        console.log(res);
        if (res.code) {
          this.$message.success("投诉已发送，请等待处理。");
        } else {
          this.$message.warning("投诉失败");
        }
        this.getList();
        this.handleClose();
      });
    },
  }
};
</script>

<style  scoped>
.home {
  background-color: #fbfbfb;
  padding-bottom: 50px;
  min-height: 788px;
}
.name {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  padding: 25px 0;
}
.page {
  float: right;
  padding: 30px 0;
}
</style>